<template>
  <VTable ref="tableRef" v-bind="tableOptins">
    <template #form="{ form }">
      <el-date-picker
        v-model="form.month"
        type="month"
        value-format="YYYY-MM"
        :clearable="false"
        placeholder="请选择月"
        @change="handleTimeChange"
      />
      <!-- </div> -->
    </template>
    <template #month0Header="{ row }">
      <div>
        {{ `${month}月份(资金计划/收入)` }}
      </div>
    </template>
    <template #month1Header="{ row }">
      <div>
        {{ `${month}月份(实际资金)` }}
      </div>
    </template>
  </VTable>
  <Remark
    v-model="remarkVisible"
    title="备注信息"
    url="fundScheduleRemark"
    :remarkData="remarkData"
    :data="remarkValue"
    @refresh="refresh"
    @close="(remarkData = {}), (remarkValue = '')"
  />
</template>
<script lang="jsx" setup>
import { ElMessage } from "element-plus";
import { getCurrentMonth } from "@/utils/time.js";
import { getMonthFundScheduleSummary } from "../../api.js";
import { Edit } from "@element-plus/icons-vue";
import Remark from "@/components/remark/index.vue";
const month = ref(getCurrentMonth());
const tableRef = ref();
const handleTimeChange = (val) => {
  month.value = getCurrentMonth(val);
  tableRef.value?.$table.commitProxy("reload");
  nextTick(async () => {
    await tableRef.value?.$table.reloadColumn(tableOptins.columns);
  });
};
const tableOptins = reactive({
  formConfig: {
    data: {
      month: getCurrentMonth(),
    },
  },
  tooltipConfig: {
    showAll: false,
  },
  isToggle: true,
  columns: [
    {
      title: "类别",
      field: "category",
      minWidth: 100,
    },
    {
      title: "事业处",
      field: "department",
      minWidth: 100,
    },
    {
      title: "项目",
      field: "paymentItem",
      minWidth: 100,
    },
    {
      title: `月份(资金计划/收入)`,
      field: "scheduleAmount",
      minWidth: 100,
      slots: {
        header: "month0Header",
      },
    },
    {
      title: `月份(实际资金)`,
      field: "actualAmount",
      minWidth: 100,
      slots: {
        header: "month1Header",
      },
    },
    {
      title: "差异额",
      field: "diffAmount",
      minWidth: 100,
    },
    {
      title: "差异率",
      field: "diffRatio",
      minWidth: 100,
    },
    {
      title: "备注信息",
      field: "remark",
      minWidth: 100,
      slots: {
        default: ({ row }) => {
          return (
            <div onClick={() => handleRemark(row)}>
              <el-button type="primary" link icon={Edit} />
              <el-link type="primary">{row.remark}</el-link>
            </div>
          );
        },
      },
      line: 2,
    },
  ],
  proxyConfig: {
    props: {
      result: "data",
    },
    autoLoad: false,
    ajax: {
      query: ({ form }) => {
        return getMonthFundScheduleSummary({ ...form }).then((res) => {
          let list = getList(res.data);
          return {
            data: list,
          };
        });
      },
    },
  },
});
const getList = (data) => {
    const { paymentMonthItems = [], receivableMonthItems = [] } = data;

  const processWeekItems = (items = [], category) => {
    return items.map((item) => ({
      category,
      ...item,
      ...(item?.receivableItem && { paymentItemId: item.receivableItemId, paymentItem: item.receivableItem })
    }));
  };
  const paymentWeek = processWeekItems(paymentMonthItems, "资金流出");
  const receivableWeek = processWeekItems(receivableMonthItems, "资金流入");
  let arr = [...receivableWeek, ...paymentWeek];
  return arr;
};

const remarkVisible = ref(false);
const remarkData = ref({});
const remarkValue = ref(null);
const handleRemark = (val) => {
  let obj = val;
  const { paymentItemId, category,remark } = obj;
  remarkData.value.fundType = category == "资金流入" ? 1 : 2;
  remarkData.value.fundItemId = paymentItemId;
  remarkData.value.timePeriod = month.value;
  remarkData.value.timePeriodType = "month";
  remarkVisible.value = true;
  remarkValue.value = remark;
};
const refresh = () => {
  tableRef?.value.$table.commitProxy("query");
};
</script>
<style lang="scss" scoped>
.vx-table {
  height: calc(100% - 40px) !important;
}
</style>
